<template>
  <view class="container">
    <!-- 返回导航栏 -->
    <view class="nav-bar">
      <text class="back-icon" @click="goBack">返回</text>
      <text class="title">药品关系图</text>
    </view>

    <!-- 图谱展示区域 -->
    <view class="graph-container">
      <view class="graph-wrapper" id="medicine-graph"></view>
    </view>

    <!-- 图例说明 -->
    <view class="legend">
      <view class="legend-item">
        <view class="dot normal"></view>
        <text class="text">正常</text>
      </view>
      <view class="legend-item">
        <view class="dot expired"></view>
        <text class="text">已过期</text>
      </view>
      <view class="legend-item">
        <view class="dot nearExpiry"></view>
        <text class="text">即将过期</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import type { Medicine } from '@/types'

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 图表实例
let chart: echarts.ECharts | null = null

// 药品数据
const medicineList = ref<Medicine[]>([{
  id: 1,
  name: '阿莫西林胶囊',
  status: 'normal',
  efficacy: '用于敏感菌所致的感染'
}, {
  id: 2,
  name: '布洛芬片',
  status: 'normal',
  efficacy: '用于发热、疼痛'
}, {
  id: 3,
  name: '维生素C片',
  status: 'nearExpiry',
  efficacy: '补充维生素C'
}])

// 初始化图表
const initChart = () => {
  const chartDom = document.getElementById('medicine-graph')
  if (!chartDom) return
  
  chart = echarts.init(chartDom)
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}'
    },
    series: [{
      type: 'graph',
      layout: 'force',
      data: medicineList.value.map(item => ({
        name: item.name,
        value: item.efficacy,
        itemStyle: {
          color: item.status === 'normal' ? '#52c41a' :
                item.status === 'expired' ? '#f5222d' : '#faad14'
        }
      })),
      links: relations,
      categories: [
        { name: '正常' },
        { name: '已过期' },
        { name: '即将过期' }
      ],
      roam: true,
      label: {
        show: true,
        position: 'right',
        formatter: '{b}'
      },
      force: {
        repulsion: 100
      },
      edgeLabel: {
        show: true,
        formatter: '{c}'
      }
    }]
  }

  chart.setOption(option)
}

onMounted(() => {
  initChart()
})
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 30rpx;
  padding-top: 120rpx;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 88rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  z-index: 100;
  border-bottom: 1rpx solid #f0f0f0;

  .back-icon {
    font-size: 28rpx;
    color: #333333;
  }

  .title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-right: 44rpx;
  }
}

.graph-container {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
  
  .graph-wrapper {
    width: 100%;
    height: 600rpx;
  }
}

.legend {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 20rpx;
  display: flex;
  justify-content: center;
  gap: 30rpx;
  
  .legend-item {
    display: flex;
    align-items: center;
    gap: 8rpx;
    
    .dot {
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
      
      &.normal {
        background: #52c41a;
      }
      
      &.expired {
        background: #f5222d;
      }
      
      &.nearExpiry {
        background: #faad14;
      }
    }
    
    .text {
      font-size: 24rpx;
      color: #666666;
    }
  }
}
</style>